<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>求职准备测试</title>
	<link rel="shortcut icon" href="images/title.ico" type="image/x-ico"/>  
	<!-- CSS includes -->
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">
    <link href="css/bootstrap-slider.css" rel="stylesheet">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<script src="js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script type='text/javascript' src="js/bootstrap-slider.js"></script>
	<script type='text/javascript' src="js/vue.js"></script>
	<script type='text/javascript' src="js/jquery.base64.js"></script>

	<style type="text/css">
		.slider-selection {
		    background: #B24155;
		}
		.slider-handle{
			background: #B24155;
		}
		span{
			font-size: 10px;
			padding: 5px;
		}
		
		table td:nth-child(2){color:#C00;}
		table tr:nth-child(1){color:#000;background-color:#489900;}
		table tr:hover{background:#489900;color:#000;}
		
		[v-cloak] {
		  display: none;
		}
	</style>
</head>

<body>

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<a href="index.html" title="求职准备度测试">
                <img class="img-responsive" src="images/logo01.jpg" alt="求职准备度测试"/>
            </a>
		</div>
	</div><!-- /.container-fluid -->
</nav>
<!--main-->
<div class="container-home">
    <div class="container">
		<div class="row">
			<div class="col-sm-12" id="result">
				<h2 class="text-danger">
					测试结果
				</h2>
				<br/>
				
				<h4 class="text-justify" id='total_results' v-cloak>
					<p>您的总分是{{total_result}}分；</p>
					<p>{{com_advise}}!{{part_advise}}</p>
					<br/>
					<button class="btn btn-success btn-sm" type="button" onclick="showAnalysis();">查看分析详情</button>
				</h4>
				<div class="col-sm-12 table-responsive" id="analysis" style="display:none">
					<table class="table" id='step1' v-cloak>
						<caption>第一部分</caption>
						<tr>
							<td>题目</td>
							<td>分数</td>
							<td>分析</td>
						</tr>
						<tr v-for='item in special_result' track-by='$index'>
							<td>{{item.subject}}</td>
							<td>{{item.score}}</td>
							<td>{{item.analysis}}</td>
						</tr>
					</table>
					
					
					<table class="table" id='step2' v-cloak>
						<caption>第二部分</caption>
						<tr>
							<td>题目</td>
							<td>分数</td>
							<td>分析</td>
						</tr>
						<tr v-for='item in special_result' track-by='$index'>
							<td>{{item.subject}}</td>
							<td>{{item.score}}</td>
							<td>{{item.analysis}}</td>
						</tr>
					</table>
					
					<table class="table" id='step3' v-cloak>
						<caption>第三部分</caption>
						<tr>
							<td>题目</td>
							<td>分数</td>
							<td>分析</td>
						</tr>
						<tr v-for='item in special_result' track-by='$index'>
							<td>{{item.subject}}</td>
							<td>{{item.score}}</td>
							<td>{{item.analysis}}</td>
						</tr>
					</table>
					
					<table class="table" id='step4' v-cloak>
						<caption>第四部分</caption>
						<tr>
							<td>题目</td>
							<td>分数</td>
							<td>分析</td>
						</tr>
						<tr v-for='item in special_result' track-by='$index'>
							<td>{{item.subject}}</td>
							<td>{{item.score}}</td>
							<td>{{item.analysis}}</td>
						</tr>
					</table>
					
					<table class="table" id='step5' v-cloak>
						<caption>第五部分</caption>
						<tr>
							<td>题目</td>
							<td>分数</td>
							<td>分析</td>
						</tr>
						<tr v-for='item in special_result' track-by='$index'>
							<td>{{item.subject}}</td>
							<td>{{item.score}}</td>
							<td>{{item.analysis}}</td>
						</tr>
					</table>
					
					<table class="table" id='step6' v-cloak>
						<caption>第六部分</caption>
						<tr>
							<td>题目</td>
							<td>分数</td>
							<td>分析</td>
						</tr>
						<tr v-for='item in special_result' track-by='$index'>
							<td>{{item.subject}}</td>
							<td>{{item.score}}</td>
							<td>{{item.analysis}}</td>
						</tr>
					</table>
					
					<table class="table" id='step7' v-cloak>
						<caption>第七部分</caption>
						<tr>
							<td>题目</td>
							<td>分数</td>
							<td>分析</td>
						</tr>
						<tr v-for='item in special_result' track-by='$index'>
							<td>{{item.subject}}</td>
							<td>{{item.score}}</td>
							<td>{{item.analysis}}</td>
						</tr>
					</table>
					<br/>
				</div>	
			</div>
		</div>
    </div>
</div>

<footer id="subfooter" class="clearfix">
    <div class="container">
        <div class="row">
			<div class="col-md-6">
                <p style="font-size:18px;"><span class="fa fa-map-marker text-color:#fff"></span> 联系我们</p>
                <p>中南大学就业指导中心</p>
                <p>地址：湖南省长沙市岳麓区中南大学校本部二办公楼二层</p>
            </div>
        </div>
    </div>
</footer>

<script type="text/javascript">	
	//$.base64.utf8encode = true;
	function showAnalysis(){
		$('#analysis').toggle();
	}
	var results = JSON.parse(window.sessionStorage.getItem("results"));
	console.log('result',results);
		
	new Vue({
		el: '#total_results',
		data: {
			total_result: results.total_results,
			com_advise: results.com_advise,
			part_advise: results.part_advise
		}
	});
	new Vue({
		el: '#step1',
		data: {
			special_result: results.special_result.step1
		}
	});
	new Vue({
		el: '#step2',
		data: {
			special_result: results.special_result.step2
		}
	});
	new Vue({
		el: '#step3',
		data: {
			special_result: results.special_result.step3
		}
	});
	new Vue({
		el: '#step4',
		data: {
			special_result: results.special_result.step4
		}
	});
	new Vue({
		el: '#step5',
		data: {
			special_result: results.special_result.step5
		}
	});
	new Vue({
		el: '#step6',
		data: {
			special_result: results.special_result.step6
		}
	});
	new Vue({
		el: '#step7',
		data: {
			special_result: results.special_result.step7
		}
	});
	
</script>
</body>
</html>